<template>
  <div class="dashboard-container">
    <div class="back-button" @click="goBack">
      <i class="fa fa-arrow-left"></i>
      返回
    </div>
    <div class="header">
      <h1 class="main-title">茶饮数据统计看板</h1>
      <p class="subtitle">探索中国茶文化的数字世界</p>
    </div>
    
    <div class="bi-container">
      <iframe 
        src="https://share.tcbi.qq.com/page/share?pageId=10552254&projectId=11039558&token=abbfbc1f-b795-407b-a901-ea2c351e7e6c&scope=page&canvasType=GRID"
        frameborder="0"
        allowfullscreen
        class="bi-frame"
      ></iframe>
    </div>
  </div>
</template>

<script>
import { useRouter } from 'vue-router'

export default {
  name: 'TeaDashboard',
  setup() {
    const router = useRouter()
    
    const goBack = () => {
      router.back()
    }
    
    return {
      goBack
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  min-height: 100vh;
  padding: 20px;
  background: linear-gradient(135deg, #1a1f2c 0%, #2d3748 100%);
  color: #fff;
}

.header {
  text-align: center;
  margin-bottom: 20px;
}

/* .header h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
  background: linear-gradient(45deg, #FFD700, #90EE90);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
} */

.header p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.1rem;
}

.bi-container {
  width: 100%;
  height: calc(100vh - 120px);
  max-width: 1800px;
  margin: 0 auto;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.bi-frame {
  width: 100%;
  height: 100%;
  border: none;
  background: #fff;
}

@media (max-width: 768px) {
  .header h1 {
    font-size: 2rem;
  }
  
  .bi-container {
    height: calc(100vh - 100px);
  }
}
.back-button {
  position: fixed;
  top: 20px;
  left: 20px;
  padding: 10px 20px;
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.2) 0%, rgba(0, 255, 255, 0.3) 100%);
  color: #fff;
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  z-index: 100;
  font-size: 16px;
}
.main-title {
    font-size: 52px;
    /* 减小字体大小 */
    font-weight: bold;
    margin: 0 0 15px;
    background: linear-gradient(45deg, #f8e8ba, #d09d54);
    /* 金木相生的颜色 */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    animation: titleFadeIn 1s ease-in-out;
    letter-spacing: 2px;
        
  font-family: 'STXingkai', 'Arial', sans-serif;
  letter-spacing: 1px;
}

.subtitle {
    color: rgba(255, 255, 255, 0.9);
    
    font-size: 18px;
    letter-spacing: 1px;
    font-weight: 300;
    
    background: linear-gradient(45deg, #f8e8ba, #d09d54);
    /* 金木相生的颜色 */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
</style> 